<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>监视的简写</title>
    <script
        type="text/javascript"
        src="../vue.js"
    ></script>
    </head>
    <body>
        <div class="p">

            <h2>今天天气怎么样？{{isHot?'热':'凉'}}</h2>
            <button @click="changeWeather()">切换天气</button>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false;
            const vm = new Vue({
                el: '.p',
                data: {
                    isHot: true,

                },
                computed: {
                    info() {
                        return this.isHot ? '炎热' : '凉爽';
                    }
                },
                methods: {
                    changeWeather() {
                        this.isHot = !this.isHot;
                    }
                },
                watch: {
/*                    //正常写法
                    isHot: {
                        immediate: true,//初始化的时候让handler调用
                        deep:true,
                        handler(newValue, oldValue) {   //回调函数
                            //handler什么时候被修改？当ishot发生变化的时候
                            console.log('ishot被修改了', newValue, oldValue)
                        }
                    },*/
                    //简写：只需要handler的时候，就可以简写
                    isHot(newValue,oldValue){
                        console.log('ishot被修改了', newValue, oldValue)
                    }

                }
            })
        </script>
    </body>
</html>